﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>前台首页</title>

		<!-- logo -->
		<link rel="shortcut icon" href="favicon.ico" />
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<!-- 图标 -->
		<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
		<!-- 动画 -->
		<link href="css/animate.css" rel="stylesheet" />
		<!-- 自定义样式 -->
		<link href="css/style.css" rel="stylesheet" />
		<!-- 复选框 -->
		<link href="css/plugins/iCheck/custom.css" rel="stylesheet" />
		<!-- 树结构 -->
		<link href="css/plugins/jsTree/style.min.css" rel="stylesheet" />
		<!-- 分页 -->
		<link rel="stylesheet" href="css/jquery.pagination.css" />
		<!-- 上传 -->
		<link href="css/plugins/dropzone/basic.css" rel="stylesheet" />
		<link href="css/plugins/dropzone/dropzone.css" rel="stylesheet" />
		<!-- 标签 -->
		<link href="css/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css" rel="stylesheet" />
		<!-- 表格 -->

		<link href="css/plugins/footable/footable.core.css" rel="stylesheet" />
		<link href="css/plugins/dataTables/datatables.min.css" rel="stylesheet" />
		<link href="css/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet" />
		<link href="css/plugins/codemirror/codemirror.css" rel="stylesheet" />
		<!-- 时间 -->
		<link href="css/plugins/datapicker/datepicker3.css" rel="stylesheet">
		<link href="css/plugins/cropper/cropper.min.css" rel="stylesheet">
	</head>

	<body>
		<div id="wrapper">
			<div id="page-wrapper" class="gray-bg">
				<!-- 导航栏 -->
				<div class="row wrapper border-bottom white-bg page-heading">
					<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3">
						<h3 class="l_title">吐槽墙</h3>
					</div>

					<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 col-lg-offset-6">
						<h3 class="l_title"><a href="houtai.html">进入后台</a></h3>
					</div>
				</div>
				<!-- 导航栏结束 -->
				<!-- 主要内容 -->
				<div class="wrapper wrapper-content row">
					<div class="row bottom-distance">
						<div class="col-lg-12">
							<div class="ibox float-e-margins">
								<div class="ibox-content">
									<div>
										<div id="insertLicence" style="height: 700px;width: 100% ">
											<div class="col-lg-12">
												<div class="ibox float-e-margins">
													<div class="ibox-content">
														<div id="tucao" style="border:2px solid #A6A8A9; height: 500px;">

															<div class="col-lg-12" style="margin-bottom: 20px; font-size: 24px;"> 吐槽内容：</div>

														</div>
														<div class="row" style="padding-top: 30px;">

															<div class="col-lg-3">
																<select name="type" id="type">
																	<option value="1">吐槽</option>
																	<option value="2">祝福</option>
																</select>
															</div>
															<div class="col-lg-3">
																<select name="type" id="user">
																	<option value="0">所有人</option>
																	<option value="2">user_1</option>
																	<option value="3">user_2</option>
																	<option value="4">user_3</option>
																</select>
															</div>

															<div class="col-lg-3">
																<input style="border-radius: 50px" id="text" class="form-control" placeholder="请输入吐槽">
															</div>
															<div class="col-lg-3">
																<button type="button" class="btn btn-primary" onclick="insertlicence()">发送</button>
															</div>
														</div>

													</div>
												</div>

											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
				<!-- 页脚开始 -->
				<div class="footer">
				</div>
				<!-- 页脚结束 -->
			</div>
			<!-- 右侧内容结束 -->
		</div>
		<!--弹窗-->
		<div id="dialog"></div>
		<!-- Mainly scripts -->
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/addHtml.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
		<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
		<!-- Custom and plugin javascript -->
		<script src="js/inspinia.js"></script>
		<script src="js/plugins/pace/pace.min.js"></script>
		<script src="js/plugins/jsTree/jstree.min.js"></script>
		<!-- Mainly scripts -->
		<script src="js/plugins/dataTables/datatables.min.js"></script>
		<!-- Peity -->
		<script src="js/plugins/peity/jquery.peity.min.js"></script>
		<!-- FooTable -->
		<script src="js/plugins/dataTables/datatables.min.js"></script>
		<!-- iCheck -->
		<script src="js/plugins/iCheck/icheck.min.js"></script>
		<!-- Peity -->
		<script src="js/demo/peity-demo.js"></script>
		<script src="js/jquery.pagination.min.js"></script>
		<!-- DROPZONE -->
		<script src="js/plugins/dropzone/dropzone.js"></script>
		<!-- ChartJS-->
		<script src="js/plugins/chartJs/Chart.min.js"></script>
		<script src="js/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
		<script src="js/plugins/datapicker/bootstrap-datepicker.js"></script>
		<!-- 自定义js -->
		<script src="js/other.js"></script>
		<!--echarts-->
		<script src="js/echarts.js"></script>
		<script type="text/javascript">
			var i = 0;

			var danmuArr = ["好好好好好好好好好", "哈哈哈哈哈哈哈哈哈", "努力努力努力努力", "加油加油加油", "加油"];
			$(document).ready(function() {
				ajax();
			})
			window.onload = function() {
				run();
			};

			function ajax() {
				danmuArr = [];
				$.ajax({
					url: httpUrl + 'selectSentence',
					data: '{type:"' + 3 + '",adminName:"' + 3 + '"}',
					type: "post",
					dataType: 'json',
					contentType: 'application/json;charset=utf-8',
					success: function(res) {
						console.log(res);
						$.each(res.data, function(k, v) {
							danmuArr.push(v.userName + ":" + v.adminSentenceId);
						})

					}
				});
			}

			function run() {
				//每隔三秒执行一次
				window.setInterval("autoDanmu(danmuArr[i])", 700);

			}

			//发送吐槽
			function insertlicence() {
				var data = {};
				var type = $("#type").val();
				var text = $("#text").val();
				var userId = localStorage.getItem("userId");
				var userName = localStorage.getItem("userName");

				data.type = type;
				data.text = text;
				data.userId = userId;
				data.userName = userName;

				$.ajax({
					url: httpUrl + 'insertSentence',
					data: JSON.stringify(data),
					type: "post",
					dataType: 'json',
					contentType: 'application/json;charset=utf-8',
					success: function(res) {
						alert(res.message);
						ajax();
					}
				});

			}

			//弹幕出现的具体位置，我的固定在底部
			function autoDanmu(text) {

				var content = $("<div class='text'>" + text + "</div>");
				//获取随机位置
				var Rand = Math.random();

				var top = 10 + Math.round(Rand * 40) + "px";
				content.css("bottom", top);
				$("#tucao").append(content);
				content.animate({
					right: $(document.body).width() + 300
				}, 8000, function() {
					$(this).remove();
				});
				i++;
				//执行完最后一条重置为0，继续重头开始
				if(i + 1 > danmuArr.length) {
					i = 0;
				}
			}
		</script>

	</body>

</html>